import { ShowToast } from '@/utils/message';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Map , Marker , CityListControl , MapTypeControl , NavigationControl  , ScaleControl , ZoomControl , InfoWindow   } from 'react-bmapgl'
 const AllList= ()=>{
    const [lng, setLng] = useState<any>()
    const [lat, setLat] = useState<any>()
    const [city, setCity] = useState<any>()
    const [address, setAddress] = useState<any>()
    var myCity = new window.BMapGL.LocalCity();
    const myFun: any = (result: any) => {
        console.log(result)
        const { lng, lat } = result.center;
        // 详细的地址描述 
        var myGeo = new window.BMapGL.Geocoder();
        myGeo.getLocation(new window.BMapGL.Point(lng, lat), function (res: any) {
            if (res) {
                console.log(res)
                setAddress(res.address)
                setLng(lng)
                setLat(lat)
                setCity(result.name)
            } else {
                ShowToast('--根据坐标得到地址描述失败--')
            }
        });

    }
    useEffect(() => {
        myCity.get(myFun)
    }, [])

    return (
        <div>
            <Map
                style={{ height: 500 }}
                center={new BMapGL.Point(lng, lat)}
                zoom={12}
                heading={0}
                tilt={40}
                enableScrollWheelZoom
            >   
                <Marker
                    position={new BMapGL.Point(lng,lat)}
                    enableDragging
                />
                <CityListControl />
                <MapTypeControl/>
                <NavigationControl />
                <ScaleControl />
                <ZoomControl />

                <InfoWindow
                    position={new BMapGL.Point(lng,lat)}
                    title={city}
                    text={address}
                    
                />
            </Map>
        </div>
    )
}

export default AllList